import React, { useState, useEffect } from 'react';
import { Tooltip, Button } from 'antd';
import './index.less';
import { Map } from 'immutable';
import Immutable from 'immutable';
import { Dothook, Bgchook } from './styled';
export default function HookStep() {
  /*     let obj1 = { name: '张三' };
    let obj2 = obj1;
    obj2.name = '李四';
    console.log(obj1.name); */

  const foo = Immutable.fromJS({ a: { b: 1 } });
  const bar = foo.setIn(['a', 'b'], 666);
  const bar1 = bar.setIn(['a', 'b'], 999);
  // 使用 setIn 赋值
  console.log(foo.getIn(['a', 'b'])); // 使用 getIn 取值，打印 1
  console.log(bar.getIn(['a', 'b'])); // 使用 getIn 取值，打印 1
  console.log(bar1.getIn(['a', 'b'])); // 使用 getIn 取值，打印 1
  // 使用 getIn 取值，打印 1
  console.log(foo === bar);

  let a = Map({
    select: 'users',
    filter: Map({ name: 'Cam' }),
  });
  let b = a.set('select', 'people');
  console.log(b.get('select'), 'b');

  //小球位置
  const [mySite, setmySite] = useState(0);
  const [title, settitle] = useState(0);
  useEffect(() => {
    console.log(mySite / 961);

    settitle(`${parseInt((mySite / 961) * 100)}%`);
  }, [mySite]);
  const [flag1, setflag] = useState(false);
  function start(e) {
    setflag(true);
  }
  function startmove(e) {
    if (flag1 === true) {
      setmySite(e.pageX - 400);
    }
  }

  function startOver(e) {
    setflag(false);
  }
  return (
    <div>
      <Tooltip placement="top" title={title}>
        <Button>Top</Button>
      </Tooltip>
      <div
        className="stephook"
        onMouseDown={(e) => start(e)}
        onMouseMove={(e) => startmove(e)}
        onMouseUp={(e) => startOver(e)}
      >
        {/* <div className="bgchook"></div> */}
        {/* <div className="dothook"></div> */}
        <Bgchook mySite={mySite}></Bgchook>
        <Tooltip placement="top" title={title}>
          <Dothook mySite={mySite}></Dothook>
        </Tooltip>
      </div>
    </div>
  );
}
